<include file="Public/head" />
<link type="text/css" rel="stylesheet" href="{:get_style_cdnurl()}paimai/yunying/plugin/select2/select2.css" />
<script src="{:get_style_cdnurl()}paimai/yunying/plugin/select2/select2.js" type="text/javascript"></script>
<style type="text/css">
    .employee .employee_left,.employee_right{width: 50%;float:left;}
    .select2-container .select2-choice > .select2-chosen{text-align: center;}
</style>
</head>
<body>
<include file="Public/common_header" />
<div class="mian">
    <include file="Public/sidebar" menu='xtgl.gysgl' />
    <div class="mianR">
        <h3 class='cha'>片区管理-关联店铺</h3>
        <div class="broker">
            <h4>片区信息</h4>
            <ul class="broker-area clearfix">
                <li><span>片区名称：</span><span class="broker-text">{$regionInfo.region_name}</span></li>
                <li><span>片区负责人：</span><span class="broker-text">{$regionInfo.real_name}</span></li>
                <li><span>所属城市：</span><span class="broker-text">{$bc_city[$regionInfo['city']]}</span></li>
                <li><span>负责人电话：</span><span class="broker-text">{$regionInfo.mobile}</span></li>
                <li><span>摘要：</span><span class="broker-text">{$regionInfo.remark}</span></li>
            </ul>
        </div>
        <div class="associated-store clearfix">
            <h4>关联店铺</h4>
            <div class="associated-left">
                <h5>店铺</h5>
                <div class="store-search"><input type="text" value="" id="text" placeholder="请输入关键字" /><input type="button" id="search" value="搜索" /></div>
                <ul class="associated-first">
                    <?php foreach ($notInFourStore as $key => $value): ?>
                        <li id="{$value.fid}">
                            <?php if ($value['region_id'] > 0): ?>
                                <i>{$value.region_name}</i>
                            <?php else: ?>
                                <i class="add-btn">添加</i>
                            <?php endif ?>
                            
                            <span>{$value.f_name}</span>
                        </li>
                    <?php endforeach ?>
                </ul>
                <ul class="associated-last"></ul>
            </div>
            <div class="associated-right">
                <h5>已添加店铺</h5>
                <ul id="eidtFourStoreId">
                    <?php foreach ($InFourStore as $k => $v): ?>
                        <li id="{$v.fid}"><span>{$v.f_name}</span><i class="delete-btn">删除</i></li>
                    <?php endforeach ?>
                    
                </ul>
            </div>
        </div>
        <input type="hidden" value="" id="fids">
        <div class="yongBtn">
            <input type="button" value="确认" onclick="makeSure()" name="queding" class="queding">
            <input type="button" onclick="cancel()" class="quxiao" value="取消">            
            <!-- <input type="button" value="确认" name="queding" class="queding">
            <input type="button" onclick="history.go(-1)" class="quxiao" value="返回">             -->
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        $(".associated-last").hide();
        var oLH=$(".associated-first li").outerHeight(true);
        
        if(($(".associated-first li").length)*oLH>320){
            $(".associated-first").css("overflow-y","scroll");
        }else{
            $(".associated-first").css("overflow-y","auto");
        }
        var oLH1=$(".associated-last li").outerHeight(true);
        if(($(".associated-last li").length)*oLH1>320){
            $(".associated-last").css("overflow-y","scroll");
        }else{
            $(".associated-last").css("overflow-y","auto");
        }
        var oLH2=$(".associated-right ul li").outerHeight(true);
        if(($(".associated-right ul li").length)*oLH2>350){
            $(".associated-right ul").css("overflow-y","scroll");
        }else{
            $(".associated-right ul").css("overflow-y","auto");
        }
        //点击搜索获取输入框的内容与下面的li里的内容匹配，匹配好的li插入
        //associated-last.ul里面并且显示，associated-first.ul隐藏
        $("#search").on("click",function(){
            if($("#text").val()==""){
                $(".associated-first").show()
                $(".associated-last").hide();
                $(".associated-first").prepend($(".associated-last").html());
                $(".associated-last").html('')
            }else{
                $("#text").css("border","solid 1px #ccc");
                var oText=$("#text").val();
                var oSpan=$(".associated-left ul li span");
                $(".associated-last").html("");
                for(var i=0;i<oSpan.length;i++){
                    if($(oSpan[i]).html().indexOf(oText)!=-1){      
                        var oLi=$(oSpan[i]).parent("li");
                        $(".associated-first").hide()
                        $(".associated-last").show();
                        $(".associated-last").append(oLi);
                    }
                    
                }
            }
        })
        $(".associated-first").on("click","li i.add-btn",function(){
            var oS=$(this).parent("li").find("span").html();
            // var oE=$(this).parent("li").find("em").html();
            var iD=$(this).parent("li").attr("id");
            $(this).parent("li").remove();
            $(".associated-right ul").prepend("<li id="+iD+"><span class='renew'>"+oS+"</span><i class='delete-btn'>删除</i></li>");
            if(($(".associated-first li").length)*oLH>320){
            $(".associated-first").css("overflow-y","scroll");
            }else{
                $(".associated-first").css("overflow-y","auto");
            }
            var oLH2=$(".associated-right ul li").outerHeight(true);
            if(($(".associated-right ul li").length)*oLH2>350){
                $(".associated-right ul").css("overflow-y","scroll");
            }else{
                $(".associated-right ul").css("overflow-y","auto");
            }
        })
        
        $(".associated-last").on("click","li i.add-btn",function(){
            var oS=$(this).parent("li").find("span").html();
            // var oE=$(this).parent("li").find("em").html();
            var iD=$(this).parent("li").attr("id");
            $(this).parent("li").remove();  
            $(".associated-right ul").prepend("<li id="+iD+"><span class='renew'>"+oS+"</span><i class='delete-btn'>删除</i></li>");
            if(($(".associated-first li").length)*oLH>320){
            $(".associated-first").css("overflow-y","scroll");
            }else{
                $(".associated-first").css("overflow-y","auto");
            }
            var oLH2=$(".associated-right ul li").outerHeight(true);
            if(($(".associated-right ul li").length)*oLH2>350){
                $(".associated-right ul").css("overflow-y","scroll");
            }else{
                $(".associated-right ul").css("overflow-y","auto");
            }
        })
        
        $(".associated-right ul").on("click","li i.delete-btn",function(){
            var oS1=$(this).parent("li").find("span").html();
            // var oE1=$(this).parent("li").find("em").html();
            var iD1=$(this).parent("li").attr("id");
            $(this).parent("li").remove();  
            if($(".associated-first").css("display")=="none"){
                $(".associated-last").prepend("<li id="+iD1+"><span class='renew'>"+oS1+"</span><i class='add-btn'>添加</i>"+"</li")
            }
            if($(".associated-last").css("display")=="none"){
                $(".associated-first").prepend("<li id="+iD1+"><span class='renew'>"+oS1+"</span><i class='add-btn'>添加</i>"+"</li")
            }
        })
    })

    function makeSure(){
        var param = {};
        var arr = [];
        $("#eidtFourStoreId li").each(function(){
            arr.push($(this).attr('id'));
        });
        param.fids = arr;
        $(".queding").attr("disabled","disabled");
        $.post("/SupplierManage/regionRelationFourStorePost/rid/{$regionInfo.rid}",param,function(data){
            if(data.code!=200){
                shibai_alert(data.msg,2000)
                $(".queding").removeAttr("disabled").removeAttr("style");
            }else{
                btn_alert("更新成功",1500,function(){
                location.href = '/SupplierManage/index/status/4';
            })
            }
        },"json");
    }

    // $(".queding").click(function(){
        
    // });

    var arr1=[];
    var arr3 = new Array(); 
    $("#eidtFourStoreId li").each(function(){
        arr1.push($(this).attr('id'));
    });
    var cancel1=arr1.sort().toString();
    $('#fids').val(cancel1);
    function cancel(){
        var arr2=[];
        $("#eidtFourStoreId li").each(function(){
            arr2.push($(this).attr('id'));
        });
        var cance2=arr2.sort().toString();
        var cancel = $("#fids").val();
        if(cancel!=cance2){
            $(".yunBei").css("display","block");
            confirm_alert("您已对数据进行了修改,是否需要保存!");
        }else{
            location.href = '/SupplierManage/index/status/4';
        }
    }
    
    $("body").on('click','.cancel',function(){
        location.href = '/SupplierManage/index/status/4';
    })

    $("body").on('click','.determine',function(){
        colse_hide();
        makeSure();
    })
</script>
<include file="Public/foot" />